<template>
	<view class="repair-wrap">
		<view class="repair-box u-p-l-30 u-p-r-30">
			<view class="header-li">
				<h3>姓名</h3>
				<text style="margin-left: auto; color: #333;font-weight: 600;font-size: 16px;">{{userObj.ry_name}}</text>
			</view>
			<view class="header-li">
				<h3>联系电话</h3>
				<text style="margin-left: auto; color: #333;font-weight: 600;font-size: 16px;">{{userObj.ry_tell}}</text>
			</view>
			<view class="header-li">
				<h3>状态</h3>
				<text style="margin-left: auto;font-weight: 600;font-size: 16px;">
				  <text :style="userObj.ins_state=='0'?'color: #999999':userObj.ins_state == '1'?'color: #f5a623':null">
					{{userObj.ins_state==0?"待受理"
					  :userObj.ins_state==1?"待确认":userObj.ins_state==2?"待确认":userObj.ins_state==3?"业主拒绝":userObj.ins_state==4?"业主同意":"暂无"}}
				  </text>
				</text>
			</view>
			<view class="header-li">
				<h3>理赔名称</h3>   
				<text style="margin-left: auto; color: #333;font-weight: 600;font-size: 16px;">{{userObj.ins_name?userObj.ins_name: '--'}}</text>
			</view>
			<view class="header-li">
				<h3>理赔类型</h3>
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">
				  {{userObj.claims_type==1?"车辆理赔"
				:userObj.claims_type==2?"高空抛物":userObj.claims_type==3?"漏水漏电":userObj.claims_type==4?"设备设施"
					  :userObj.claimee_type==5?"交通事故":userObj.claims_type==6?"人身意外":userObj.claims_type==7?"工伤理赔"
						  :userObj.claims_type==8?"盗窃理赔":"---"}}</text>
			</view>
			<view class="header-li">
				<h3>事件日期</h3>   
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.event_time.substring(0,10)}}</text>
			</view>
			<!-- <view class="header-li"> -->
			<!-- 	<h3>保险金额</h3>    
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.ins_money?userObj.ins_money: '0'}}元</text>
			</view> -->
			<view class="header-li">
				<h3>要求金额</h3>
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.tr_money?userObj.tr_money:'0'}}元</text>
			</view>
			<view class="header-li" style='padding: 30rpx 0 30rpx 0;display: block;line-height: 60rpx;'>
				<h3>理赔原因</h3>
				<view style="color: #999999;font-size: 16px;word-wrap: break-word;line-height: 20px;">{{userObj.ins_cer}}</view>
			</view>
			<view style="margin-top: 10px;font-size: 14px" >
				<text> 免赔金额为<text style="color: #f5a623;margin: 0 5px;">{{userObj.claims_amount}}</text>元,费用有<text style="color: #f5a623;margin: 0 5px;">
			  {{userObj.taking_sides==1?"物业公司":userObj.taking_sides==2?"业主本人":"暂无"}}</text>承担</text>
			</view>
			<view class="header-li" style='padding: 30rpx 0 0rpx 0;'>
				<h3>预计赔付金额</h3>
				<view style="color: #F5A623;font-size: 16px;margin-left: auto;">{{userObj.payout_amount?userObj.payout_amount: '--'}}元</view>
			</view>
			<text style='display: flex;color: #999;margin-top: -10px;'>提示：此金额为物业公司预计赔付金额</text>
			<view class="header-li" style='display: block;line-height: 60rpx;'>
				<h3>说明</h3>
				<view style="color: #999999;font-size: 16px;">{{userObj.ins_shuomin?userObj.ins_shuomin: '暂无说明'}}</view>
			</view>
		    <view>
				<img v-if='userObj.picture' style="width: 100px;height: 100px;" :src="userObj.picture" alt="">
		    </view>
		    <view style="position: fixed;bottom: 0;width: 100%;padding: 30rpx 0;background: #fff;left: 0;">
				  <button type="primary" style='background: linear-gradient(180deg, #76D904 0%, #417505 100%);' class="button_in" @click="handlerSubmitButton">同意理赔</button>
				  <button class="button1" @click="juJueTianJiao()">不同意</button>				 
		    </view>
	</view>
	<u-modal @confirm='queryBtn' @cancel="modalCancel" confirm-text="确认"  cancel-text="返回核实" :zoom='false' v-model="modelShow" :show-title='false' :show-cancel-button='true'
	 confirm-color="#58a004">
		<view class="u-p-t-30 u-p-l-50  u-font-28" style='font-size: 18px;padding: 18px 0 10px !important;text-align: center;'>
			提示
		</view>
		<view class="u-p-t-20 u-p-b-30 u-p-l-50  u-font-28" style='text-align: center;'>
			{{modelContent}}
		</view>
	</u-modal>
	
	<view :hidden="userFeedbackHidden" class="popup_overlay">
		<view class="popup_content">
			<view class="popup_title">写下您的不同意原因</view>
			<view class="popup_textarea_item" style="">
				<textarea class="popup_textarea" placeholder='有什么想告诉我们的...' v-model="ruleFrom.yz_remark">
				</textarea>
        <view class="header-li" style='padding: 5px 10px 0px;line-height: 48px;font-size: 16px;margin: -35px 0 6px;'>
          <view class="header-name"><h4 style="width: 85px">最低赔付</h4></view>
          <input class="uni-combox__input" style='height: 48px;width: 78%; font-size: 12px' type="text" placeholder="请输入您要求赔付金额" v-model="ruleFrom.ye_amount"/> 元
        </view>
				<view @click="submitFeedback()">
					<button class="popup_button">确定拒绝</button>
				</view>
			</view>
			<view class='popup_X' @click='userFeedbackHidden = true'>
				X
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userFeedbackHidden: true,
				modelShow: false,
				modelContent: null,
				imgFlag: true,
				ruleFrom: {
					user_id: uni.getStorageSync('rawData').userId, //用户id
					// --银行卡支付方式 目前我就清楚对公和对私这两个状态
					pay_type: 1,
					// ---银行卡号
					bank_cards_hao:null,
					//---支付宝号
					alipay_hao:null,
					bank_cards_ka: null, // 银行卡类型，
					yz_remark: null,
					ye_amount: null,
				},
				date: currentDate,
				//  选择理赔类型
				indexss:0,//工作单位下标
				lnsTest:[
				  {
					lnsTest_id:1,
					lnsTest_name:'银行卡'
				  },
				  {
					lnsTest_id:2,
					lnsTest_name:'支付宝'
				  },
				],//单位
				indexYingHa:0,//银行卡
				yingHangLei:[
				  {
					yingHang_id:0,
					yingHang_name:"请选择",
				  },
				  {
					yingHang_id:1,
					yingHang_name:'中国工商银行'
				  },
				  {
					yingHang_id:2,
					yingHang_name:'中国农业银行'
				  },
				  {
					yingHang_id:3,
					yingHang_name:'中国银行'
				  },
				  {
					yingHang_id:4,
					yingHang_name:'中国建设银行'
				  },
				  {
					yingHang_id:5,
					yingHang_name:'交通银行'
				  }
				],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(options) {
		  const item = JSON.parse(decodeURIComponent(options.item));
		  this.userObj = item
		  console.log(this.userObj,"0-0-----c--d-dd详情信息")
		},
		methods: {
			hideDiv() { // 隐藏输入弹出框
				this.userFeedbackHidden = false;
			},
			submitFeedback() {
				if (this.ruleFrom.ye_amount == null) {  // 事件时间
					uni.showToast({
					  title: '您未填写要求金额',
					  duration: 2000,
					  icon: 'none'
					});
					return;
				}
				if (this.ruleFrom.yz_remark == null) {  // 事件时间
					uni.showToast({
					  title: '您未填写拒绝原因',
					  duration: 2000,
					  icon: 'none'
					});
					return;
				}
				this.$request.api.insuraXiouGai({
				  id :this.userObj.disId,
				  ins_state:5,
				  ye_amount: this.ruleFrom.ye_amount,
				  yz_remark:this.ruleFrom.yz_remark,
				}).then(res => {
				  if (res.data.code==0) {
					this.userFeedbackHidden = true;
					this.resetForm();
				  }
				})
			},
			handlerSubmitButton(){
				let items = encodeURIComponent(JSON.stringify(this.userObj))
				uni.navigateTo({
				  url: '/pages/yeInsurance/settlementOfaClaim' + '?item=' + items
				});
			},
			queryBtn(){
				console.log(this.modelContent)
				if (this.modelContent == '理赔操作成功，请注意打款信息。') {
					this.modelShow = false;
					this.resetForm();
				} else {
					this.hideDiv();
				}
			},
			// 
			modalCancel() {
				// this.resetForm();
				this.modelShow = false;
			},
			resetForm() {
				this.ruleFrom.pay_type = 1
				this.ruleFrom.bank_cards_hao = null
				this.ruleFrom.alipay_hao = null
				this.ruleFrom.bank_cards_ka = null
				this.ruleFrom.yz_remark = null
				uni.navigateTo({
				  url: '/pages/yeInsurance/indexlnsurance'
				})
			},
			//拒绝
			juJueTianJiao(){
				this.modelShow = true;
				this.modelContent = '确定要拒绝该理赔信息吗？';
			},
	


			bindDateChange: function(s) {
				this.date = s.target.value
				this.ruleFrom.pick_time = this.date
			},
			colseImg(val){
					this.ruleFrom.goods_images = null;
					if(!this.ruleFrom.goods_images){
						this.imgFlag=true
					}
			},
			//理赔类型
		  handlerCompany(e){
			this.indexss = e.target.value
			this.ruleFrom.pay_type = this.lnsTest[this.indexss].lnsTest_id
		  },

		  //选择选择银行
		  bindPickerChange(r){
			this.indexYingHa = r.target.value
			this.ruleFrom.bank_cards_ka = this.yingHangLei[this.indexYingHa].yingHang_name
		  },

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;
		border-top: 4rpx solid #f4f4f4;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-class-box {
		width: 196rpx;
		height: 68rpx;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		border: 2rpx solid #ccc;

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}

	.guar-class-box-active {
		border-color: #FEEED6;
		background: #FEEED6;
		color: #F9A832;
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-text textarea {
		width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		border-radius: 30rpx;
	}

	.guarn-box {
		width: 100%;
		height: 216rpx;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.custom-style {
		color: #F9AF3A;
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		line-height: 84rpx;
		color: #666;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 400rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.input1 {
		width: 400rpx;
		text-align: left;
		margin-top: 8px;
		line-height: 200%;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: #F9A832;
		background-color: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}


//  按钮样式
  .foot_item{
    margin-top: 40rpx;
    height: 120rpx;
  }
  .button1{
    width: 40%;
    line-height: 40px;
    float: left;
    margin-left: 34px;
    // height: 30%;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
  }
  .button_in{

    width: 40%;
    line-height: 41px;
    float: right;
    margin-right: 30px;

     //height: 31%;

    border-top-right-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
  }
  
  
  .popup_overlay {
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.8);
          z-index: 1001;
      }
      .popup_content {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  width: 300px;
		  height: 307px;
		  margin-left: -150px;
		  margin-top: -140px;
		  border: 10px solid white;
		  background-color: white;
		  z-index: 1002;
		  overflow: auto;
		  border-radius: 10px;
      }
	  .popup_X {
		  position: absolute;
		  top: 0px;
		  right: 0;
		  color: #333;
		  width: 22px;
		  text-align: center;
	  }
      .popup_title {
          padding-top: 20upx;
          width: 480upx;
          text-align: center;
          font-size: 32upx;
      }
      .popup_textarea_item {
        margin-top: 14px;
          padding-top: 8px;
          height: 240upx;
          width: 260px;
          background-color: #F1F1F1;
          // margin-top: 30upx;
          margin-left: 20upx;
      }
      .popup_textarea {
          width: 410upx;
          font-size: 16px;
          margin-left: 20upx;
      }
      .popup_button {
          color: white;
          background-color: #4399FC;
          border-radius: 20upx;
      }
</style>
